تسجيل MediaStream في الواجهة الأمامية: التقاط الوسائط المستند إلى المتصفح

لقد أحدثت القدرة على التقاط الصوت والفيديو مباشرة داخل متصفح الويب ثورة في تطوير تطبيقات الويب. يوفر تسجيل MediaStream في الواجهة الأمامية، بالاعتماد على واجهة برمجة التطبيقات MediaRecorder، طريقة قوية وفعالة لتنفيذ هذه الوظيفة دون الاعتماد على معالجة معقدة من جانب الخادم. يتيح هذا النهج التفاعل في الوقت الفعلي، وتقليل زمن الوصول، وتحسين تجارب المستخدم، خاصة في تطبيقات مثل الاجتماعات عبر الإنترنت، وأدوات تحرير الفيديو، والبرامج التعليمية التفاعلية.

فهم واجهة برمجة تطبيقات MediaStream

في قلب التقاط الوسائط المستند إلى المتصفح تكمن واجهة برمجة تطبيقات MediaStream. يمثل MediaStream تدفقًا لبيانات الوسائط، مثل مسارات الصوت أو الفيديو. للوصول إلى MediaStream، تستخدم عادةً طريقة getUserMedia().

تطالب طريقة getUserMedia() المستخدم بالإذن للوصول إلى الميكروفون و/أو الكاميرا. وتعيد Promise الذي يتم حله بكائن MediaStream إذا منح المستخدم الإذن، أو يتم رفضه بخطأ إذا رفض المستخدم الإذن أو إذا لم يكن الوصول متاحًا.

مثال: طلب الوصول إلى الكاميرا

إليك مثال أساسي لكيفية طلب الوصول إلى كاميرا المستخدم:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Stream is available, do something with it
    console.log("Camera access granted!");
  })
  .catch(function(error) {
    console.error("Error accessing camera: ", error);
  });

            

              
                Copy
              
            
          

شرح:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): يطلب هذا السطر الوصول إلى الكاميرا (video: true) ويعطل الصوت بشكل صريح (audio: false). يمكنك ضبط هذه الخيارات لطلب كل من الصوت والفيديو أو الصوت فقط.
• .then(function(stream) { ... }): يتم تنفيذ هذا الجزء إذا منح المستخدم الإذن. يحمل المتغير stream كائن MediaStream.
• .catch(function(error) { ... }): يتم تنفيذ هذا الجزء في حالة وجود خطأ، مثل رفض المستخدم للإذن. من الضروري التعامل مع الأخطاء بأناقة لتوفير تجربة مستخدم جيدة.

خيارات التكوين لـ getUserMedia()

تقبل طريقة getUserMedia() كائن قيود اختياري يسمح لك بتحديد الخصائص المرغوبة لتدفق الوسائط. يتضمن هذا خيارات مثل:

• video: قيمة منطقية (true/false) لطلب الفيديو، أو كائن لقيود فيديو أكثر تحديدًا (مثل الدقة، ومعدل الإطارات).
• audio: قيمة منطقية (true/false) لطلب الصوت، أو كائن لقيود صوت أكثر تحديدًا (مثل إلغاء الصدى، وقمع الضوضاء).
• width: العرض المطلوب لتدفق الفيديو.
• height: الارتفاع المطلوب لتدفق الفيديو.
• frameRate: معدل الإطارات المطلوب لتدفق الفيديو.

مثال: طلب دقة كاميرا محددة

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Stream is available
})
.catch(function(error) {
  // Handle errors
});

            

              
                Copy
              
            
          

في هذا المثال، نطلب تدفق فيديو بعرض يتراوح بين 640 و 1920 بكسل (بشكل مثالي 1280) وارتفاع يتراوح بين 480 و 1080 بكسل (بشكل مثالي 720). كما نطلب الصوت أيضًا.

تقديم واجهة برمجة تطبيقات MediaRecorder

بمجرد حصولك على MediaStream، يمكنك استخدام واجهة برمجة تطبيقات MediaRecorder لتسجيل بيانات الوسائط. توفر واجهة MediaRecorder طرقًا لبدء التسجيل وإيقافه وإيقافه مؤقتًا واستئنافه، بالإضافة إلى الوصول إلى البيانات المسجلة.

إنشاء مثيل MediaRecorder

لإنشاء مثيل MediaRecorder، تقوم بتمرير كائن MediaStream إلى مُنشئ MediaRecorder:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

يمكنك أيضًا تحديد خيارات إضافية في المُنشئ، مثل نوع MIME المطلوب للبيانات المسجلة:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

أنواع MIME المدعومة:

تعتمد أنواع MIME المتاحة على المتصفح والترميزات التي يدعمها. تشمل أنواع MIME الشائعة:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

يمكنك استخدام طريقة MediaRecorder.isTypeSupported() للتحقق مما إذا كان نوع MIME معين مدعومًا من قبل المتصفح:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 is supported');
} else {
  console.log('video/webm;codecs=vp9 is not supported');
}

            

              
                Copy
              
            
          

تسجيل البيانات باستخدام MediaRecorder

توفر واجهة برمجة تطبيقات MediaRecorder العديد من الأحداث التي يمكنك الاستماع إليها لمراقبة عملية التسجيل:

• dataavailable: يتم إطلاق هذا الحدث كلما كانت البيانات متاحة للحفظ.
• start: يتم إطلاق هذا الحدث عند بدء التسجيل.
• stop: يتم إطلاق هذا الحدث عند إيقاف التسجيل.
• pause: يتم إطلاق هذا الحدث عند إيقاف التسجيل مؤقتًا.
• resume: يتم إطلاق هذا الحدث عند استئناف التسجيل.
• error: يتم إطلاق هذا الحدث في حالة حدوث خطأ أثناء التسجيل.

الحدث الأكثر أهمية هو dataavailable. يوفر هذا الحدث كائن Blob يحتوي على البيانات المسجلة. يمكنك تجميع هذه الكائنات Blob ثم دمجها في كائن Blob واحد عند اكتمال التسجيل.

مثال: تسجيل وحفظ الفيديو

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('data-available: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Recording stopped!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Recording started!");

// To stop recording:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

شرح:

• let recordedChunks = [];: مصفوفة لتخزين أجزاء البيانات المسجلة.
• mediaRecorder.ondataavailable = function(event) { ... }: يتم استدعاء هذه الدالة كلما توفرت بيانات جديدة. تضيف البيانات إلى مصفوفة recordedChunks.
• mediaRecorder.onstop = function() { ... }: يتم استدعاء هذه الدالة عند إيقاف التسجيل. تقوم بإنشاء Blob من الأجزاء المتراكمة، وتنشئ عنوان URL لـ Blob، وتنشئ رابط تنزيل، وتطلق التنزيل. كما تقوم بتنظيف كائن URL الذي تم إنشاؤه بعد تأخير قصير.
• mediaRecorder.start();: يبدأ هذا عملية التسجيل.
• mediaRecorder.stop();: استدعِ هذا لإيقاف التسجيل.

التحكم في عملية التسجيل

توفر واجهة برمجة تطبيقات MediaRecorder طرقًا للتحكم في عملية التسجيل:

• start(timeslice): يبدأ التسجيل. تحدد الوسيطة الاختيارية timeslice الفاصل الزمني (بالمللي ثانية) الذي يجب عنده إطلاق حدث dataavailable. إذا لم يتم توفير timeslice، يتم إطلاق حدث dataavailable فقط عند إيقاف التسجيل.
• stop(): يوقف التسجيل.
• pause(): يوقف التسجيل مؤقتًا.
• resume(): يستأنف التسجيل.
• requestData(): يطلق حدث dataavailable يدويًا.

توافق المتصفحات والـ Polyfills

واجهات برمجة التطبيقات MediaStream و MediaRecorder مدعومة على نطاق واسع في المتصفحات الحديثة. ومع ذلك، قد لا تدعم المتصفحات القديمة هذه الواجهات بشكل أصلي. إذا كنت بحاجة إلى دعم المتصفحات القديمة، يمكنك استخدام الـ polyfills لتوفير الوظائف اللازمة.

تتوفر العديد من الـ polyfills، بما في ذلك:

• adapter.js: يوفر هذا الـ polyfill توافقًا عبر المتصفحات لواجهات برمجة تطبيقات WebRTC، بما في ذلك getUserMedia().
• recorderjs: مكتبة جافاسكريبت توفر وظائف MediaRecorder للمتصفحات التي لا تدعمها بشكل أصلي.

التطبيقات العملية وحالات الاستخدام

يفتح تسجيل MediaStream في الواجهة الأمامية مجموعة واسعة من الإمكانيات لتطوير تطبيقات الويب. إليك بعض التطبيقات العملية وحالات الاستخدام:

• الاجتماعات عبر الإنترنت ومؤتمرات الفيديو: التقاط ونقل تدفقات الصوت والفيديو في الوقت الفعلي للاجتماعات عبر الإنترنت ومؤتمرات الفيديو.
• أدوات تحرير الفيديو: السماح للمستخدمين بتسجيل وتحرير محتوى الفيديو مباشرة في المتصفح.
• البرامج التعليمية والعروض التوضيحية التفاعلية: إنشاء برامج تعليمية وعروض توضيحية تفاعلية تلتقط تفاعلات المستخدم وتقدم ملاحظات مخصصة.
• تطبيقات تسجيل الصوت: بناء تطبيقات تسجيل صوتي لتدوين الملاحظات والمذكرات الصوتية وتحرير الصوت.
• أنظمة المراقبة والكاميرات الأمنية: تنفيذ أنظمة مراقبة وكاميرات أمنية قائمة على المتصفح تلتقط وتسجل تدفقات الفيديو.
• أدوات إمكانية الوصول: تطوير أدوات يمكنها تسجيل الكلام وتحويله إلى نص في الوقت الفعلي، أو تسجيل نشاط الشاشة لمراجعته لاحقًا.

مثال: تنفيذ تطبيق بسيط لتسجيل الفيديو

إليك مثال مبسط لكيفية دمج المفاهيم التي تمت مناقشتها في تطبيق أساسي لتسجيل الفيديو باستخدام HTML و CSS وجافاسكريبت:

HTML (index.html):

            



  
  


  
Browser Video Recorder
  

  Record
  Stop
  



            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Error accessing media devices.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  //Stop all video streams
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Reset array for the next recording
}

            

              
                Copy
              
            
          

يوضح هذا المثال المبادئ الأساسية لالتقاط الفيديو وعرضه وتسجيله وتنزيله مباشرة داخل المتصفح. ضع في اعتبارك إضافة معالجة الأخطاء، أو خيارات ترميز مختلفة، أو جودة تسجيل قابلة للتعديل من قبل المستخدم لتحسين الوظائف.

اعتبارات أمنية

عند العمل مع تسجيل MediaStream، من الضروري أن تكون على دراية بالاعتبارات الأمنية:

• أذونات المستخدم: اطلب دائمًا إذن المستخدم قبل الوصول إلى الميكروفون أو الكاميرا. وضح بوضوح سبب حاجتك للوصول إلى هذه الأجهزة.
• HTTPS: استخدم HTTPS لضمان تشفير تدفق الوسائط وحمايته من التنصت. تتطلب واجهة برمجة تطبيقات getUserMedia() عادةً سياقًا آمنًا (HTTPS).
• تخزين البيانات: إذا كنت تقوم بتخزين البيانات المسجلة، فتأكد من تخزينها بشكل آمن وحمايتها من الوصول غير المصرح به. ضع في اعتبارك استخدام آليات التشفير والتحكم في الوصول. التزم بلوائح خصوصية البيانات ذات الصلة بمستخدميك وموقعهم (مثل GDPR، CCPA).
• الخصوصية: كن شفافًا بشأن كيفية استخدامك للبيانات المسجلة. وفر للمستخدمين التحكم في بياناتهم والقدرة على حذفها.
• التعليمات البرمجية الضارة: كن حذرًا عند التعامل مع المحتوى الذي ينشئه المستخدم، حيث قد يحتوي على تعليمات برمجية ضارة. قم بتعقيم أي مدخلات للمستخدم لمنع هجمات البرمجة النصية عبر المواقع (XSS).

تحسين الأداء

لضمان الأداء الأمثل عند استخدام تسجيل MediaStream، ضع في اعتبارك ما يلي:

• اختيار نوع MIME: اختر نوع MIME مدعومًا من قبل المتصفح ويوفر ضغطًا جيدًا.
• الفاصل الزمني لـ timeslice: اضبط الفاصل الزمني لـ timeslice لتحقيق التوازن بين توفر البيانات والأداء. سيؤدي الفاصل الزمني الأصغر لـ timeslice إلى إطلاق أحداث dataavailable بشكل متكرر، ولكنه قد يزيد أيضًا من الحمل الزائد.
• معالجة البيانات: تعامل مع البيانات المسجلة بكفاءة لتجنب تسرب الذاكرة واختناقات الأداء. استخدم تقنيات مثل التخزين المؤقت والبث لمعالجة كميات كبيرة من البيانات.
• واجهة المستخدم: صمم واجهة مستخدم توفر ملاحظات واضحة للمستخدم حول عملية التسجيل. اعرض مؤشر تسجيل وقدم عناصر تحكم لإيقاف التسجيل مؤقتًا واستئنافه وإيقافه.

الخلاصة

يمكّن تسجيل MediaStream في الواجهة الأمامية مطوري الويب من إنشاء تجارب وسائط غنية وتفاعلية مباشرة داخل المتصفح. من خلال فهم واجهات برمجة التطبيقات MediaStream و MediaRecorder، يمكن للمطورين بناء مجموعة واسعة من التطبيقات، من الاجتماعات عبر الإنترنت وأدوات تحرير الفيديو إلى البرامج التعليمية التفاعلية وأنظمة المراقبة. من خلال الانتباه إلى اعتبارات الأمان والأداء، يمكنك إنشاء حلول تسجيل وسائط قوية وسهلة الاستخدام تعزز وظائف تطبيقات الويب الخاصة بك وتزيد من تفاعل المستخدمين معها.